<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>理财产品 - 虚拟银行系统</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="stylesheet" href="/css/main.css">
  <link rel="stylesheet" href="/css/financial.css">
</head>
<body>
  <div class="app-wrapper">
    <!-- 顶部导航栏 -->
    <div id="top-navbar"></div>
    
    <div class="main-container">
      <!-- 侧边栏 -->
      <div id="sidebar"></div>
      
      <!-- 主内容区 -->
      <div class="content">
        <div class="dashboard-header">
          <div class="dashboard-welcome">
            <h1 class="dashboard-welcome-title">理财产品</h1>
            <p class="dashboard-welcome-subtitle">投资理财，财富增值</p>
          </div>
        </div>
        
        <!-- 摘要卡片 -->
        <div class="summary-cards">
          <div class="summary-card">
            <div class="summary-card-icon">
              <i class="fas fa-chart-line"></i>
            </div>
            <div class="summary-card-content">
              <div class="summary-card-title">总投资额</div>
              <div class="summary-card-value" id="total-investment">¥0.00</div>
            </div>
          </div>
          
          <div class="summary-card">
            <div class="summary-card-icon">
              <i class="fas fa-coins"></i>
            </div>
            <div class="summary-card-content">
              <div class="summary-card-title">预期收益</div>
              <div class="summary-card-value" id="expected-profit">¥0.00</div>
            </div>
          </div>
          
          <div class="summary-card">
            <div class="summary-card-icon">
              <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="summary-card-content">
              <div class="summary-card-title">持有产品</div>
              <div class="summary-card-value" id="holding-products">0 个</div>
            </div>
          </div>
        </div>
        
        <!-- 产品筛选区 -->
        <div class="filter-section">
          <div class="filter-header">
            <h2 class="section-title">产品筛选</h2>
            <button class="btn btn-link" id="reset-filter">重置筛选</button>
          </div>
          
          <div class="filter-body">
            <div class="filter-row">
              <div class="filter-group">
                <label class="filter-label">风险等级</label>
                <div class="filter-options">
                  <label class="filter-option">
                    <input type="checkbox" name="risk" value="1"> 
                    <span>低风险</span>
                  </label>
                  <label class="filter-option">
                    <input type="checkbox" name="risk" value="2"> 
                    <span>中风险</span>
                  </label>
                  <label class="filter-option">
                    <input type="checkbox" name="risk" value="3"> 
                    <span>高风险</span>
                  </label>
                </div>
              </div>
              
              <div class="filter-group">
                <label class="filter-label">投资期限</label>
                <div class="filter-options">
                  <label class="filter-option">
                    <input type="checkbox" name="duration" value="short"> 
                    <span>短期（≤30天）</span>
                  </label>
                  <label class="filter-option">
                    <input type="checkbox" name="duration" value="medium"> 
                    <span>中期（31-180天）</span>
                  </label>
                  <label class="filter-option">
                    <input type="checkbox" name="duration" value="long"> 
                    <span>长期（＞180天）</span>
                  </label>
                </div>
              </div>
              
              <div class="filter-group">
                <label class="filter-label">预期收益</label>
                <div class="filter-range">
                  <input type="range" id="min-return" min="1" max="10" step="0.1" value="1">
                  <div class="filter-range-value">≥ <span id="min-return-value">1</span>%</div>
                </div>
              </div>
            </div>
            
            <div class="filter-actions">
              <button class="btn btn-primary" id="apply-filter">应用筛选</button>
            </div>
          </div>
        </div>
        
        <!-- 标签页 -->
        <div class="financial-tabs">
          <div class="financial-tab active" data-tab="all">全部产品</div>
          <div class="financial-tab" data-tab="hot">热门推荐</div>
          <div class="financial-tab" data-tab="my">我的理财</div>
        </div>
        
        <!-- 产品列表 -->
        <div class="financial-content active" id="all-products">
          <div class="products-grid" id="products-list">
            <div class="loader-container">
              <div class="loader"></div>
            </div>
          </div>
          
          <!-- 分页 -->
          <div class="pagination" id="products-pagination">
            <button class="pagination-btn" data-page="prev">
              <i class="fas fa-chevron-left"></i>
            </button>
            <div class="pagination-info">
              <span id="current-page">1</span> / <span id="total-pages">1</span>
            </div>
            <button class="pagination-btn" data-page="next">
              <i class="fas fa-chevron-right"></i>
            </button>
          </div>
        </div>
        
        <!-- 热门推荐 -->
        <div class="financial-content" id="hot-products">
          <div class="products-grid" id="hot-products-list">
            <div class="loader-container">
              <div class="loader"></div>
            </div>
          </div>
        </div>
        
        <!-- 我的理财 -->
        <div class="financial-content" id="my-products">
          <div class="my-products-list" id="my-products-list">
            <div class="loader-container">
              <div class="loader"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 产品详情模态框 -->
  <div class="modal" id="product-detail-modal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="product-detail-title">产品详情</h4>
          <button type="button" class="modal-close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <div class="product-detail-header">
            <div class="product-detail-name" id="product-detail-name"></div>
            <div class="product-detail-code" id="product-detail-code"></div>
          </div>
          
          <div class="product-detail-info">
            <div class="product-detail-item">
              <div class="product-detail-label">预期年化收益率</div>
              <div class="product-detail-value accent" id="product-detail-return"></div>
            </div>
            <div class="product-detail-item">
              <div class="product-detail-label">投资期限</div>
              <div class="product-detail-value" id="product-detail-duration"></div>
            </div>
            <div class="product-detail-item">
              <div class="product-detail-label">起投金额</div>
              <div class="product-detail-value" id="product-detail-min-amount"></div>
            </div>
            <div class="product-detail-item">
              <div class="product-detail-label">最高投资金额</div>
              <div class="product-detail-value" id="product-detail-max-amount"></div>
            </div>
            <div class="product-detail-item">
              <div class="product-detail-label">风险等级</div>
              <div class="product-detail-value" id="product-detail-risk"></div>
            </div>
            <div class="product-detail-item">
              <div class="product-detail-label">产品总额</div>
              <div class="product-detail-value" id="product-detail-total"></div>
            </div>
            <div class="product-detail-item">
              <div class="product-detail-label">销售期限</div>
              <div class="product-detail-value" id="product-detail-sale-period"></div>
            </div>
            <div class="product-detail-item">
              <div class="product-detail-label">起息日</div>
              <div class="product-detail-value" id="product-detail-value-date"></div>
            </div>
          </div>
          
          <div class="product-progress">
            <div class="product-progress-label">
              已售 <span id="product-detail-sold-percentage">0</span>%
            </div>
            <div class="product-progress-bar">
              <div class="product-progress-fill" id="product-progress-fill"></div>
            </div>
            <div class="product-progress-values">
              <span>¥0</span>
              <span id="product-detail-sold-amount">¥0</span>
              <span id="product-detail-total-amount">¥0</span>
            </div>
          </div>
          
          <div class="product-detail-description">
            <h4>产品描述</h4>
            <div id="product-detail-desc">
              暂无详细描述
            </div>
          </div>
          
          <div class="product-purchase-box">
            <div class="product-purchase-header">
              <h4>购买</h4>
            </div>
            <div class="product-purchase-body">
              <div class="form-group">
                <label class="form-label" for="purchase-amount">投资金额</label>
                <div class="input-with-icon">
                  <i class="fas fa-yen-sign"></i>
                  <input type="number" id="purchase-amount" class="form-control" placeholder="请输入投资金额" min="1000" step="1000">
                </div>
                <div class="form-help-text" id="purchase-amount-hint">最低1,000元，最高100,000元</div>
              </div>
              
              <div class="product-purchase-calc">
                <div class="product-purchase-calc-item">
                  <div class="product-purchase-calc-label">预期收益</div>
                  <div class="product-purchase-calc-value" id="expected-return">¥0.00</div>
                </div>
              </div>
            </div>
            <div class="product-purchase-footer">
              <div class="form-group mb-3">
                <label class="checkbox-container">
                  <input type="checkbox" id="purchase-agreement">
                  <span class="custom-checkbox">
                    <i class="fas fa-check"></i>
                  </span>
                  <span>我已阅读并同意<a href="#" class="btn-link">《理财产品协议》</a>和<a href="#" class="btn-link">《风险提示》</a></span>
                </label>
              </div>
              <button class="btn btn-primary btn-block" id="confirm-purchase-btn">确认购买</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 购买成功模态框 -->
  <div class="modal" id="purchase-success-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">购买成功</h4>
          <button type="button" class="modal-close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body text-center">
          <div class="mb-4">
            <i class="fas fa-check-circle text-success" style="font-size: 64px;"></i>
          </div>
          <h3 class="mb-2">购买成功</h3>
          <p class="mb-4">您的理财订单已提交成功</p>
          
          <div class="success-order-info mb-4">
            <div class="success-order-item">
              <div class="success-order-label">订单编号</div>
              <div class="success-order-value" id="success-order-no"></div>
            </div>
            <div class="success-order-item">
              <div class="success-order-label">产品名称</div>
              <div class="success-order-value" id="success-product-name"></div>
            </div>
            <div class="success-order-item">
              <div class="success-order-label">投资金额</div>
              <div class="success-order-value" id="success-amount"></div>
            </div>
            <div class="success-order-item">
              <div class="success-order-label">预期收益</div>
              <div class="success-order-value" id="success-profit"></div>
            </div>
            <div class="success-order-item">
              <div class="success-order-label">起息日期</div>
              <div class="success-order-value" id="success-value-date"></div>
            </div>
            <div class="success-order-item">
              <div class="success-order-label">到期日期</div>
              <div class="success-order-value" id="success-due-date"></div>
            </div>
          </div>
          
          <div class="alert alert-info text-left">
            <div class="alert-icon">
              <i class="fas fa-info-circle"></i>
            </div>
            <div>
              <strong>温馨提示：</strong>
              <ul class="ml-4 mb-0 mt-2">
                <li>您可以在"我的理财"中查看投资记录</li>
                <li>收益将在产品到期后自动转入您的账户</li>
                <li>如有任何疑问，请联系客服</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" id="view-my-products-btn">查看我的理财</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 脚本 -->
  <script src="/js/utils/Utils.js"></script>
  <script src="/js/components/Toast.js"></script>
  <script src="/js/services/ApiService.js"></script>
  <script src="/js/components/PageLayout.js"></script>
  <script src="/js/components/TopNavBar.js"></script>
  <script src="/js/components/SideBar.js"></script>
  <script src="/js/pages/financial.js"></script>
</body>
</html>
